<template>
  <div class="edit-layout data-edit-skill">
    <back-button @click="backAction" />
    <div class="edit-layout-button-row">
      <cg-button @click="submitAction">提交</cg-button>
    </div>
    <div class="edit-layout-content-row">
      <cg-scrollbar wrap-height="max">
        <cg-form
          :fields="fields"
          :values="formData"
          @value-change="(key: string, value: any) => setFormValue(key, value)"
        />
      </cg-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import backButton from '../../../common/components/back-button.vue'
import layout from '../components/edit-layout'
import costItem from '../components/costItem/main.vue'
import { findImages, findSkills, findItems } from '../global'

defineOptions({
  name: 'data-edit-skill'
})

const images = ref([])
const skills = ref([])
const items = ref([])

const context = {
  data: {
    images,
    items,
    skills
  },
  components: {
    costItem
  }
}

const { formData, fields, setFormValue, backAction, submitAction, init } = layout('item', context)

onMounted(() => {
  init()
  findImages(images, 1)
  findSkills(skills)
  findItems(items)
})
</script>

<style lang="scss"></style>
